import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile";
import "./Login.css";
import axiostoken from "../../utils/axiostoken"
export default class Login extends Component {
    state = {
        username: "",
        password: ""
    }
    handleRegClick = (params) => {
        this.props.history.push("/register")
    }
    handleLoginClick = (params) => {
        if (this.state.username !== "" && this.state.password !== "") {
            axiostoken.post("loginCheck", {
                username: this.state.username,
                password: this.state.password,
            }).then((res) => {
                console.log(res)
                if (res.msg === "登录成功") {
                    localStorage.setItem("oauth_token", res.wdata.oauth_token)
                    this.props.history.push("/")
                }
            })
        }
    }

    handleUsername = (e) => {
        let username = e.target.value;
        this.setState({
            username
        })
    }
    handlePassword = (e) => {
        let password = e.target.value;
        this.setState({
            password
        })
    }
    render() {
        return (
            <div className="yg-login">
                <div className="yg-login-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >登录</NavBar>
                </div>
                {/* 登录内容的开始 */}
                <div className="login-content">
                    <label htmlFor="username">
                        <input type="text" id="username" value={this.state.username} placeholder="账号" onChange={this.handleUsername} />
                    </label>
                    <br />
                    <label htmlFor="password">
                        <input type="text" id="password" value={this.state.password} placeholder="密码" onChange={this.handlePassword} />
                    </label>
                    <div className="login-btn" onClick={this.handleLoginClick}>登录</div>
                    <span className="reg-btn" onClick={this.handleRegClick}>注册</span>
                </div>
                {/* 登录内容的结束 */}
            </div>
        )
    }
}
